/**
 * Created by charlie on 18-1-15.
 */
import React from 'react'
import {View,Text,StyleSheet,ScrollView,TouchableOpacity} from 'react-native'
import Color from '../../assets/colors';
import Loading from '../../components/loading/loading'
import {Actions} from 'react-native-router-flux';

export default class Index extends React.Component{
    render(){
        const {data,loading} = this.props.stateTracking;

        return (
            <View>
                {
                    loading?<Loading/>:
                        <ScrollView style={{marginTop:20,marginBottom:20}}>
                            <View>
                                {data.map(i => (
                                    <View style={styles.mainContainer}>
                                        <View style={{flexDirection: 'column',alignItems:'center'}}>
                                            <View style={styles.itemLine} />
                                            <View style={i.status==0? styles.itemGreenBorder:
                                             i.status==1? styles.itemBlueBorder:styles.itemRedBorder}/>
                                            <View style={styles.itemLine} />
                                        </View>
                                        <View style={styles.itemText}>
                                            <Text>{i.value}</Text>
                                            <TouchableOpacity onPress={() => {Actions.push('ZhengGaiDan')}}>
                                                <Text style={{color:Color.btnPrimaryBg}}>
                                                    {i.status ==='1'?'       点击此处查看整改回复单':''}
                                                    {/*1,已提交，2，失败，3，成功*/}
                                                </Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                ))}
                            </View>
                        </ScrollView>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    mainContainer:{
        marginLeft:50,
        flexDirection: 'row',
        alignItems:'center',
        height:50
    },
    itemGreenBorder:{
        borderWidth:1,
        borderColor:Color.selectGrayBg,
        width:8,
        height:8,
        borderRadius:5,
        backgroundColor:'white'
    },
    itemRedBorder:{
        borderWidth:1,
        borderColor:'red',
        width:8,
        height:8,
        borderRadius:5,
        backgroundColor:'white'
    },
    itemBlueBorder:{
        borderWidth:1,
        borderColor:'blue',
        width:8,
        height:8,
        borderRadius:5,
        backgroundColor:'white'
    },
    itemLine:{
        width:1,
        height:21,
        backgroundColor:Color.unselectGrayBg
    },
    itemText:{
        flexDirection: 'row',
        marginLeft:10,
        width: '100%',
        height: '100%',
        alignItems:'center'
    }
})